<template>
    <div class="my-chart" id="my-chart">
    </div>
</template>
<script setup lang="ts">
import { onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { dateList, list } from '@/views/scroll/myChart';
type EChartsOption = echarts.EChartsOption;

const props = defineProps({
    list1: {
        type: Array as () => number[],
        required: true
    }
});

let myChart: any = null;
const getOption = () => {
    return {
        grid: {
            left: '65px',
            right: '30px',
            top: '10%',
            bottom: '10%'
        },
        xAxis: {
            type: 'category',
            data: dateList
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 10
        },
        series: [
            {
                data: list,
                type: 'line',
                smooth: true
            },
            {
                data: props.list1,
                type: 'line',
                areaStyle: {},
                smooth: true
            }
        ]
    }
}
const drawChart = () => {
    myChart = echarts.init(document.getElementById('my-chart'));
    myChart.setOption(getOption())
}
watch(() => props.list1, () => {
    myChart.setOption(getOption())
}, { deep: true });
onMounted(() => {
    drawChart();
})
</script>

<style lang="scss" scoped>
.my-chart {
    width: 100%;
    height: 400px;
}
</style>